<template>
  <div class="search-form">
    <el-form
      :model="searchForm"
      inline
    >
      <el-form-item>
        <el-input
          size="small"
          clearable
          v-model="searchForm.serialNumber"
          placeholder="设备序列号"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          size="small"
          clearable
          v-model="searchForm.name"
          placeholder="设备名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="search"
          :loading="searchForm.btnLoading"
        >查询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'searchForm'
  },
  props: {
    searchForm: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  methods: {
    search() {
      this.$emit('search');
    }
  }
};
</script>

<style lang="scss" scoped>
.el-form-item {
  margin: 5px 10px 5px 0;
}
.search-form {
  background-color: #fff;
  .el-input {
    width: 180px;
  }
  .el-button--primary {
    background-color: #2c83b1 !important;
    border-color: #2c83b1 !important;
  }
}
</style>
